<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>新增群组</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <link href="__PUBLIC__/plugins/bootstrap.min.css" rel="stylesheet">
        <link rel="stylesheet" href="__PUBLIC__/layui/css/layui.css"  media="all">        
        <link rel="stylesheet" href="__PUBLIC__/font-awesome/css/font-awesome.min.css" media="all" />
        <link href="__PUBLIC__/plugins/dataTables/dataTables.bootstrap.css" rel="stylesheet">        
        <link rel="stylesheet" href="__CSS__/admin.css"  media="all">
    </head>
    <body style="padding:10px;">
        <div class="tplay-body-div">
            <div class="layui-tab">
                <ul class="layui-tab-title">
                    <li><a href="{:url('admin/ldapgroup/groupList')}" class="a_menu">群组管理</a></li>
                    <li class="layui-this">{notempty name="$title"}{$title}{else}新增群组{/notempty}</li>
                </ul>
            </div> 
            <div style="margin-top: 20px;">
            </div>
            <form class="layui-form" id="admin">
                <div class="layui-form-item">
                    <label class="layui-form-label">组名</label>
                    <div class="layui-input-inline">
                        <input name="group_name" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input" type="text" {notempty name="$groupInfo.cn"} value="{$groupInfo.cn}" {/notempty}>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">组描述</label>
                    <div class="layui-input-inline">
                        <input name="description" placeholder="请输入" autocomplete="off" class="layui-input" type="text" {notempty name="$groupInfo.description"}value="{$groupInfo.description}"{/notempty}>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">组员</label>
                    <div class="layui-inline">
                        <textarea rows="3" cols="60" class="layui-textarea" id="selectUsers" ></textarea>
                        <input type="hidden" name="selectUserArr" id="selectUserArr" value=""/>
                        <input type="hidden" name="id" id="selectUserArr" value="{notempty name="$groupInfo"}{$groupInfo.cn}{/notempty}"/>
                    </div>
                </div>

                <table id="dataTables" class="layui-table display">  
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>账号</th>
                            <th>姓名</th>
                            <th>邮箱地址</th>
                            <th>所属组</th>
                            <th>用户属性</th>
                        </tr>
                    </thead>
                    <tbody class="checkboxVal">
                        {volist name="userList" id="vo"}
                        <tr>
                            <td><input type="checkbox" name="uid" value="{$vo.uid}" {notempty name="$groupInfo"}{range name="vo.uid" value="$groupInfo.memberuidstr"}checked{/range}{/notempty} lay-filter="users" lay-skin="primary"></td>
                            <td>{$vo.uid}</td>
                            <td>{$vo.displayname}</td>
                            <td>{$vo.mail}</td>
                            <td>{$vo.group}</td>
                            <td>{$vo.employeetype}</td>                                   
                        </tr>
                        {/volist}
                    </tbody>
                </table>

                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="admin">立即提交</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </form>            
        </div>

        <script src="__PUBLIC__/jquery/jquery.min.js"></script>
        <script src="__PUBLIC__/layui/layui.js"></script>            
        <script type="text/javascript" src="__PUBLIC__/plugins/dataTables/jquery.dataTables.js"></script>
        <script type="text/javascript" src="__PUBLIC__/plugins/dataTables/dataTables.bootstrap.js"></script>
        <script>
            //初始化选中
            var checkarr = new Array();
            $("input:checkbox[name='uid']:checked").each(function (i) {
                checkarr[i] = $(this).val();
            });
            var checkstr = checkarr.join("，");//将数组合并成字符串
//                            console.log(arr);
            $("#selectUserArr").val(checkarr);
            $("#selectUsers").html(checkstr);


            var message;
            layui.config({
                base: '__JS__/',
                version: '1.0.1'
            }).use(['app', 'message'], function () {
                var app = layui.app,
                        $ = layui.jquery,
                        layer = layui.layer;
                //将message设置为全局以便子页面调用
                message = layui.message;
                //主入口
                app.set({
                    type: 'iframe'
                }).init();
            });

            layui.use(['element', 'layer', 'form'], function () {
                var layer = layui.layer,
                        $ = layui.jquery,
                        form = layui.form;

                $('#dataTables').dataTable({
                    bLengthChange: false
                });

                Array.prototype.remove = function (val) {
                    var index = this.indexOf(val);
                    if (index > -1) {
                        this.splice(index, 1);
                    }
                };

                form.on('checkbox(users)', function (obj) {
                    var data = $(obj.elem);
                    var id = data.parents('tr').first().find('td').eq(1).text();
                    console.log(id);
                    var check = obj.elem.checked;
                    console.log(check);
                    if (check) {
                        checkarr.push(id);
                    } else {
                        checkarr.remove(id);
                    }


//                    var arr = new Array();
//                    $("input:checkbox[name='uid']:checked").each(function (i) {
//                        arr[i] = $(this).val();
//                    });
                    var str = checkarr.join("，");//将数组合并成字符串
//                            console.log(arr);
                    $("#selectUserArr").val(checkarr);
                    $("#selectUsers").html(str);
//                            console.log(str);
                });

                form.on('submit(admin)', function (data) {
                    $.ajax({
                        url: "{:url('admin/ldapgroup/publish')}",
                        data: $('#admin').serialize(),
                        type: 'post',
                        async: false,
                        success: function (res) {
                            if (res.code == 1) {
                                layer.alert(res.msg, function (index) {
                                    location.href = res.url;
                                })
                            } else {
                                layer.msg(res.msg);
                            }
                        }
                    })
                    return false;
                });
            });

        </script>
    </body>
</html>